<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->


<div class="ddp-type-contents ddp-resize2 ddp-type2 popup-prep-create">
  <!-- 닫기 버튼 -->
  <a href="javascript:" class="ddp-btn-close" (click)="close()"></a>
  <!-- //닫기 버튼 -->
  <div class="ddp-icon-name">
    <div class="ddp-ui-name2 ddp-type3">
      {{'msg.dp.ui.ds.create.title' | translate : {type : 'file'} }}
      <span class="ddp-txt-info ddp-type">{{'msg.dp.create.staging.sub.title' | translate}}</span>
      <em class="ddp-bg-order-line3-type2"></em>
    </div>
  </div>
  <!-- contents in  -->
  <div class="ddp-type-contents-in ddp-full">
    <div class="ddp-box-popupcontents ddp-wrap-file-create type-info">
      <!-- create file -->
      <div class="ddp-ui-create-file">
        <!-- list file -->
        <div class="ddp-list-create-file">
          <ul class="ddp-list-file-name" >

            <ng-container *ngFor="let file of datasetFiles; let i = index">
              <li [ngClass]="{'ddp-selected':currDSIndex===i && file.fileFormat !== fileFormat.EXCEL}"  >


                <!-- NOT EXCEL -->
                <ng-container *ngIf="file.fileFormat !== fileFormat.EXCEL">
                  <!-- checkbox -->
                  <div class="ddp-wrap-checkbox" (click)="selectFile($event,i)">
                    <label class="ddp-label-checkbox" (click)="checkGroup($event, i)">
                      <input type="checkbox" [checked]="file.selected">
                      <i class="ddp-icon-checkbox"></i>
                    </label>
                    <span class="ddp-txt-checkbox">
                      <span class="ddp-txt-subname">{{file.fileExtension}}
                        <em class="ddp-icon-error2" [ngStyle]="{'display': file.error?'':'none'}"></em>
                      </span>
                      <span class="ddp-txt-filename">{{file.fileName}}.</span>
                    </span>
                  </div>
                  <!-- //checkbox -->
                </ng-container>
                <!-- // NOT EXCEL -->


                <!-- EXCEL -->
                <ng-container *ngIf="file.fileFormat === fileFormat.EXCEL">
                  <!-- checkbox -->
                  <div class="ddp-wrap-checkbox" (click)="selectFile($event,i)">
                    <label class="ddp-label-checkbox" (click)="checkGroup($event, i)">
                      <input type="checkbox" [checked]="file.selected">
                      <i class="ddp-icon-checkbox"></i>
                    </label>
                    <span class="ddp-txt-checkbox">
                      <span class="ddp-txt-subname">{{file.fileExtension}}</span>
                      <span class="ddp-txt-filename">{{file.fileName}}.</span>
                    </span>
                  </div>
                  <!-- //checkbox -->
                  <!-- sub -->
                  <ul class="ddp-list-sub-file"  *ngFor="let item of file.sheetInfo; let j = index">
                    <li [ngClass]="{'ddp-selected':currSheetIndex===j && currDSIndex===i}">
                      <!-- checkbox -->
                      <div class="ddp-wrap-checkbox" (click)="selectSheet($event, i, item.sheetName, j)">
                        <label class="ddp-label-checkbox" (click)="checkSheet($event, i, j)">
                          <input type="checkbox" [checked]="item.selected">
                          <i class="ddp-icon-checkbox"></i>
                        </label>
                        <span class="ddp-txt-checkbox">
                          <span class="ddp-txt-subname"></span>
                          <span class="ddp-txt-filename">{{item.sheetName}}</span>
                        </span>
                      </div>
                      <!-- //checkbox -->
                    </li>

                  </ul>
                  <!-- sub -->
                </ng-container>
                <!-- EXCEL -->

              </li>
            </ng-container>

          </ul>
        </div>
        <!-- //list file -->

        <!-- detail -->
        <div class="ddp-wrap-create-detail ">
          <div class="ddp-ui-create-detail">
            <div class="ddp-wrap-grid-option">
              <!-- total -->
              <div class="ddp-data-total">
                  <span class="ddp-txt-data">
                    <span class="ddp-txt-num" *ngIf="(currDetail.columns)">{{currDetail.columns}}</span> Column(s)
                  </span>
              </div>

              <div class="ddp-data-name">
                <em class="ddp-icon-files">
                  <svg-icon-component [name]="currDetail.fileFormat" [isBlackAndWhite]="true"></svg-icon-component>
                </em>
                {{currDetail.detailName}}
              </div>
            </div>

            <!-- 그리드 영역 -->
            <div class="ddp-wrap-grid"  [ngStyle]="getGridStyle()">
              <div class="ddp-ui-empty" *ngIf="clearGrid">{{'msg.dp.ui.no.preview' | translate}}</div>
              <div grid-component style="width:100%; height:100%;" [hidden]="clearGrid" ></div>
            </div>
            <!-- //그리드 영역 -->

            <div class="ddp-wrap-column-option" [ngStyle]="{'display': isJSON?'none':''}">

              <div class="ddp-wrap-fold " [ngClass]="{'ddp-selected':settingFoldFlag}" >
                <a href="javascript:" class="ddp-fold-link" (click)="settingFold()">{{'msg.dp.btn.advanced.settings' | translate}}</a>
                <div class="ddp-fold-det">
                  <!-- edit -->
                  <div class="ddp-wrap-edit3 ddp-type ddp-error" [ngStyle]="{'display': !isCSV?'none':''}">
                    <label class="ddp-label-type">{{'msg.dp.th.col.delimiter' | translate}}</label>
                    <!-- edit option -->
                    <div class="ddp-ui-edit-option ddp-type">

                      <!-- apply -->
                      <div class="ddp-input-apply ddp-edit" [ngClass]="{'ddp-disabled': !isCSV}">
                        <input type="text" placeholder="{{'msg.dp.th.col.delimiter.ph' | translate}}"
                               class="ddp-input-txt" [(ngModel)]="currDelimiter"
                               (keydown)="keyDownEvent($event, 'delimiter')">
                        <em class="ddp-icon-apply" (click)="changeDelimiter()"></em>
                      </div>
                      <!-- //apply -->
                      <span class="ddp-data-error" [ngStyle]="{'visibility': isDelimiterRequired?'visible':'hidden'}">
                        {{'msg.common.ui.required' | translate}}</span>
                    </div>
                    <!-- //edit option -->
                  </div>
                  <!-- //edit -->
                  <!-- edit -->
                  <div class="ddp-wrap-edit3 ddp-type ddp-error" [ngStyle]="{'display': isJSON?'none':''}">
                    <label class="ddp-label-type">{{'msg.dp.th.col.cnt' | translate}}</label>
                    <!-- edit option -->
                    <div class="ddp-ui-edit-option ddp-type">

                      <!-- apply -->
                      <div class="ddp-input-apply"  [ngClass]="{'ddp-disabled': isJSON}">
                        <input type="text" placeholder="{{'msg.dp.th.col.cnt.ph' | translate}}"
                               class="ddp-input-txt" [(ngModel)]="currColumnCount"
                               (keydown)="keyDownEvent($event, 'colCnt')">
                        <em class="ddp-icon-apply" (click)="changeColumnCount()"></em>
                      </div>
                      <!-- //apply -->
                      <span class="ddp-data-error" [ngStyle]="{'visibility': isColumnCountRequired?'visible':'hidden'}">
                        {{'msg.common.ui.required' | translate}}
                      </span>
                    </div>
                    <!-- //edit option -->
                  </div>
                  <!-- //edit -->
                  <div style="clear: both;" ></div>
                  <!-- edit -->
                  <div class="ddp-wrap-edit3 ddp-type ddp-error" [ngStyle]="{'display': !isCSV?'none':''}">
                    <label class="ddp-label-type">{{'msg.dp.th.quote' | translate}}</label>
                    <!-- edit option -->
                    <div class="ddp-ui-edit-option ddp-type">

                      <!-- apply -->
                      <div class="ddp-input-apply ddp-edit" [ngClass]="{'ddp-disabled': !isCSV}">
                        <input type="text" placeholder="{{'msg.dp.th.quote.ph' | translate}}"
                               class="ddp-input-txt" [(ngModel)]="currQuote"
                               (keydown)="keyDownEvent($event, 'quoteChar')">
                        <em class="ddp-icon-apply" (click)="changeQuote()"></em>
                      </div>
                      <!-- //apply -->
                    </div>
                    <!-- //edit option -->
                  </div>
                  <!-- //edit -->
                </div>
              </div>

            </div>
          </div>

        </div>
        <!-- //detail -->


      </div>
      <!-- //create file -->

      <!-- warning -->
      <div class="ddp-box-synch type-error" [ngStyle]="{'display': previewErrorMsg != ''?'':'none'}">
        <div class="ddp-txt-synch">
          <em class="ddp-icon-info"></em>
          {{previewErrorMsg}}
        </div>
      </div>
      <!-- //warning 에러항목을 확인하세요-->

    </div>
  </div>
  <!-- //contents in  -->
  <!-- buttons -->
  <div class="ddp-ui-buttons">
    <a href="javascript:" class="ddp-btn-type-popup" (click)="prev()">{{'msg.comm.btn.previous' | translate}}</a>
    <!-- disabled 시 ddp-disabled 추가 -->
    <a href="javascript:" class="ddp-btn-type-popup ddp-bg-black"
       [ngClass]="{'ddp-disabled': !isNext}" (click)="next()">
      {{'msg.comm.btn.next' | translate}}
    </a>
  </div>
  <!-- //buttons -->

</div>
